(function() {

	var span = document.querySelectorAll('span');
	var maps = document.getElementsByClassName('map')[0];
	var map1 = document.getElementsByClassName('map1')[0];
	var content = document.getElementsByClassName('content')[0];
	span[0].addEventListener('click', function() {
		if(span[1].innerHTML == '海南') {
			span[1].innerHTML = '广东'
			maps.style.display = 'block';
			map1.style.display = 'none';
		} else {
			span[1].innerHTML = '海南';
			maps.style.display = 'none';
			map1.style.display = 'block';
		}
	});

	/*************音乐动画效果控制************/

	$(function() {
		var music = document.getElementById('music');
		$('#musicbutton').click(function() {
			if(music.paused) {
				music.play();
				$("#musicbutton").removeClass("pause").addClass("music");
				$('.musicbutton .iconfont').css({
					'animation': 'music 4s infinite '
				});
				$('.musicbutton').css({
					'animation': 'mu 4s infinite '
				});
				$('.icon').removeClass('icon-guanbiyinle').addClass('icon-yinle');
			} else {
				music.pause();
				$('#musicbutton').removeClass('play').addClass('music');
				$('.musicbutton .iconfont').css({
					'animation': 'none'
				});
				$('.musicbutton').css({
					'animation': 'none '
				});
				$('.icon').removeClass('icon-yinle').addClass('icon-guanbiyinle');
			}
		})
	});
})();